
import React           			from 'react';
import { Link } 				from 'react-router-dom';
import {inject, observer }      from 'mobx-react'
import TableList 				from 'component/table-list/index.jsx';
import PropTypes 				from "prop-types";

import './index.css';

@inject('store')
@observer
class Search extends React.Component{
	// context中的路由参数
	static contextTypes = {
    	router: PropTypes.object
  	}
	// 构造函数
	constructor(props){
		super(props);
	}
	// 监听输入框变化
	onInputChange(e){
		this.inputValue = e.target.value
	}
	// 输入框回车
	onInputKeyUp(e){
		if(e.keyCode === 13){
			if(!!this.inputValue){
				console.log("search:",this.inputValue);
				this.props.store.setSearchKey(true);
				this.props.store.setSearchList(this.inputValue);
				this.context.router.history.push("search?key=" + this.inputValue);
			}else{
				this.props.store.setSearchKey(false);
				this.context.router.history.push(`search?key=''`);
			}			
		}
	}
	render(){
		return(
			<div className="search">
			  <span className="glyphicon glyphicon-search"></span>
			  <input type="text" className="form-control input-search" 
			  		 placeholder="请输入搜索内容" 
			  		 onChange={(e) => this.onInputChange(e)}
			  		 onKeyUp={(e) => this.onInputKeyUp(e)}/>
			</div>
			
		);
	}
}

export default Search;
